<template>
	<view>
		<form action="formsubmit">
			<view class="entry">
				<text class="sure">请输入核销码:</text><input type="text" />
			<button form-type="submit" @click="submitEvent" size="mini" class="btn2">识别</button>
			</view>
		</form>
		<view class="p" v-if="show==true">
			<view class="all">
				<view class="title">
					核销码 MC-1234-5678-9012
				</view>
				<view class="service">
					<text style="font-size: 28rpx; font-weight: bolder;">服务内容</text><br />
					<text>×××标准洗车服务包含</text><br />
					<text>整车泡沫冲洗擦干</text><br />
					<text>轮胎轮毂冲洗清洁</text><br />
					<text>车内吸尘</text><br />
					<text>内饰脚垫简单除尘</text><br />
					<text>(不包含虫尸、水泥、沥青和顽固污渍清理等)</text><br />
				</view>
				<view class="order">
					<text style="font-size: 28rpx; font-weight: bolder;">订单信息</text><br />
					<text>订单价格 ￥30.00</text><br />
					<text>实付金额 ￥25.00</text><br />
					<text>优惠金额 ￥5.00</text><br />
					<text>订单编号 2020032554565799</text><br />
					<text>支付时间 2020.03.30 14:40:45</text><br />
					<text>预约时间 2020.03.30 14:40 </text><br />
				</view>
			</view>
			<button size="default" @click="showModal()" v-if="this.whether==true" class="btn">确认核销</button>
			<button size="default" class="btn1" v-if="this.whether!=true">已核销</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				whether: true,
				show:false
			}
	
	
		},
		methods: {
			showModal() {
				let that = this
				uni.showModal({
					title:'核销此订单',
					content: '请您仔细核对订单，此操作不可撤销，请谨慎操作',
					success: function(res) {
						if (res.confirm) {
							console.log('核销')
							that.change()
						} else {
							console.log('取消')
	
						}
					}
				})
			},
			change() {
				this.whether = false
			},
			submitEvent(){
				this.show=true
			}
			
	
		}
	}
</script>

<style>
	.sure{
		margin-right: 10rpx;
		
	}
    .entry{
		display: flex;
		
	}
	input {
		background-color: white;
		width: 400rpx;
	}
	.btn2{
		color: #F9F9F9;
		background-color: #0D7AF7;
		font-size: 15rpx;
		height: 45rpx;
		line-height: 45rpx;
	}
	.p {
		padding: 0 34rpx 0 48rpx;
	}
	
	.all {
		background-color: white;
		margin-top: 100rpx;
		overflow: hidden;
		padding: 0 54rpx 0 26rpx;
		border-radius: 26rpx;
	}
	
	.title {
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		font-size: 36rpx;
		margin-top: 28rpx;
		font-weight: bolder;
	}
	
	.service {
		border-top: 1rpx solid #F9F9F9;
		border-bottom: 1rpx solid #F9F9F9;
		margin: 28rpx 0;
		font-size: 28rpx;
		font-weight: bold;
		padding: 28rpx 0 28rpx 0;
	}
	
	.order {
		font-size: 28rpx;
		font-weight: bold;
		padding: 0 0 28rpx 0;
		margin-bottom: 28rpx;
	}
	
	.btn {
		width: 524rpx;
		color: #F9F9F9;
		background-color: #0D7AF7;
		height: 40px;
		line-height: 40px;
		border-radius: 16px;
		font-size: 14px;
		font-weight: bolder;
		margin-top: 100rpx;
	}
	
	.btn1 {
		width: 524rpx;
		color: #F9F9F9;
		background-color: #9A9A9A;
		height: 40px;
		line-height: 40px;
		border-radius: 16px;
		font-size: 14px;
		font-weight: bolder;
		margin-top: 100rpx;
	}
</style>